<template>
<div class="wrapper" :class="{error}">
  <input type="text" :value="value" :disabled="disabled" 
  @input="$emit('input',$event.target.value)" 
  @change="$emit('change',$event.target.value)" 
  @focus="$emit('focus',$event.target.value)" 
  @blur="$emit('blur',$event.target.value)" 
  >
  <template v-if="error">
    <m-icon name="error" class="errorIcon"></m-icon>
    <span class="errorMsg">{{error}}</span>
  </template>
</div>
</template>

<script>
import mIcon from './icon.vue'
export default {
  props:{
    value:{
      type:String,
    },
    disabled:{
      type:Boolean
    },
    error:{
      type:String,
    }
  },
  components:{
    mIcon
  }
}
</script>

<style lang="stylus" scoped>
$font_size = 12px
$height = 32px
$border_color = #999
$border_color_hover = #666
$border_radius = 4px
$box_shaow_color = rgba(0,0,0,0.5)
$red = #F1453D
.wrapper
  display inline
  font-size $font_size
  &.error
    >input
      border-color $red
  > input
      height $height
      border 1px solid $border_color
      border-radius $border_radius
      padding t0 8px
      font-size inherit
      &:hover
        border-color $border_color_hover
      &:focus
        box-shadow inset 0 1px 1px $box_shaow_color
        outline none
      &[disabled]
        border-color #bbb
        color #bbb
        cursor not-allowed
  .errorMsg
    color $red
  .errorIcon 
    fill $red
</style>